<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ZJF（自建房）</title>
	<!-- GIS -->
	<link href="./Plugin/gis/mapbox/2.14.1/mapbox-gl.css" rel="stylesheet">
	<script type="text/javascript" src="./Plugin/gis/mapbox/2.14.1/mapbox-gl.js"></script>
	<!-- <script type="text/javascript" src="./Plugin/gis/mapbox/mapbox-gl-language.js"></script> -->
	<script type="text/javascript" src="./Plugin/gis/turf/6.5.0/turf.min.js"></script>
	<script type="text/javascript" src="./plugin/js/message.js"></script>
	<!-- WEB -->
	<script type="text/javascript" src="./Plugin/web/jquery/jquery.min.js"></script>
	<link href="./Plugin/web/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="./Plugin/web/bootstrap/js/bootstrap.min.js"></script>
	<!-- DATA -->
	<!-- <script type="text/javascript" src="./Data/geo/HSFL.js"></script> -->

	<style>
		/* #toolbar1 {
			position: absolute;
			top: 20px;
			left: 20px;
			width: 460px;
			text-align: center;
			z-index: 9999;
			border-radius: 4px;
		} */
		/* 气泡样式 */
		.popup{
			padding: 0px 10px 0px 10px;
			width: auto;
			/* height: 80px; */
			color: #fff;
			line-height: 20px;
			text-align: left;
			background: #3DC018;
			z-index: 9999;

			box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
			border-radius: 9px;
			font-size: 16px;
		}
		.popup::after{
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			/* 箭头靠下边 */
			transform: translateX(-50%);
			left: 50%;
			/* bottom: -10px; */
			/*三角大小*/
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-top: 10px solid #3DC018;
		}
		.popup p{
			margin: 0px;
		}
		/* 解决mapbox样式问题 */
		.mapboxgl-popup-content {
			background: none;!important;
			border-radius: 0px;!important;
			box-shadow: none;!important;
			padding: 0px;!important;
		}
		.mapboxgl-popup-tip {
			display: none;
		}
		/* 气泡不可被选中 */
		.no-selection {
			-webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none; /* Chrome/Safari/Opera */
			-khtml-user-select: none; /* Konqueror HTML */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently supported by most modern browsers */
		}
	</style>
</head>
<body style=" margin: 0;overflow: hidden;background-color: transparent;width: 100%;height:100%;position: absolute;top: 0;">
	<!-- <div id="toolbar1" class="panel panel-primary">
		<div class='panel-heading'>
			<h5 class='panel-title text-center'>功能交互</h5>
		</div>
		<div class='panel-body content'>
			<input type="button" class="btn btn-default" onclick="addTDT_img()" value="切换影像底图"></input>
			<input type="button" class="btn btn-default" onclick="addTDT_vec()" value="切换矢量底图"></input>
			<input type="button" class="btn btn-default" onclick="panTo()" value="地图平移"></input>
		</div>
	</div> -->
	<div id="map" style="margin:0 auto;width: 100%;height: 100%; background-color: transparent;border:rgba(255,255,255,0);"></div>
	<script type="text/javascript">
		// 初始化空数据
		const FeatureCollection = {
			'type': 'FeatureCollection',
			'features': []
		};
		const blankStyle = {
			version: 8,
			name: 'BlankMap',
			sources: {},
			layers: [
				{
					id: 'background',
					type: 'background',
					paint: {
						'background-color': 'rgba(255, 255, 255, 0)' /* 背景颜色-透明 */
					}
				}
			]
		};
		// let wfsUrl = 'http://39.103.152.237:8084/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:zm_building&outputFormat=application/json';
		let wfsUrl = 'https://119zjf.jt.beijing.gov.cn/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:zm_buildingchangping&outputFormat=application/json';
		
		// 多边形内点坐标
		// zm_building.features.forEach((e) => {
		// wfsGeojson.features.forEach((e) => {
		// 	let point = turf.pointOnFeature(e);
		// 	e.properties.coordinatesX = point.geometry.coordinates[0];
		// 	e.properties.coordinatesY = point.geometry.coordinates[1];
		// });
		
		let map;
		// 气泡对象数组，随地图移动变化
		let popupMoveArray = [];
		let wfsGeojson = {};

		init();
		function init(){
			// map
			map = new mapboxgl.Map({
				container: 'map',
				style: blankStyle,
				doubleClickZoom: false,
				center: [116.39080959136174, 39.912609058258795],
				zoom: 13.36,
				minZoom: 8,
				maxZoom: 21,
				projection: 'globe'
			});
			
			map.on('load',async () => {
				console.log('--- mapLoad ---');

				// 请求wfs服务
				// await getGeojsonByWFS();
				// 加载图层
				addTDT_img();
				addVectorLayers();
				// 加载地块
				// addPolygons();

				// 点击事件
				map.on('click', 'vector_polygon', (e) => {
					// console.log('地图鼠标点击', e.lngLat);
					let bbox = [
						[e.point.x, e.point.y],
						[e.point.x, e.point.y],
					];
					let features = map.queryRenderedFeatures(bbox, {
						layers: ['vector_polygon'],
					});
					if(features.length){
						// 修改图层样式
						map.setPaintProperty(
							'vector_line', 
							'line-color',
							[
								"case",
								["==", ["get", 'fwbh'], features[0].properties['fwbh']],
								'rgba(255, 91, 99, 1)',
								'rgba(59, 133, 255, 1)',
							]
						);
						// initInfo消息交互
						let message = { 'key': 'polygonInfo', 'value': { 'polygonInfo': features[0].properties } };
						sendMessage('gisLayerMessage', message);
					}
				});

				// 触摸移动事件
				map.on('touchmove',async () => {
					// 请求wfs服务
					await getGeojsonByWFS();
					// 加载地块
					addPolygons();
				})

				map.on('zoom','vector_polygon', e =>{
					if(e.zoom !== "ZOOM") return;
					if(map.getZoom() < 15.5) clearPopups();
				})
				// map处于空闲事件
				map.on('idle','vector_polygon', () => {
					// console.log('--- moveend ---', map.getZoom());
					let features = map.queryRenderedFeatures({ layers: ['vector_polygon'] });
					
					/**
					 * 根据需求，可适当调整考虑不同等级下的加载方式
					 */
					// clear
					clearPopups();
					// 取样临界值
					let tolerance = 0;
					if(map.getZoom() > 17){
						tolerance = 0;
					}else if((map.getZoom() > 16) && (map.getZoom() <= 17)){
						tolerance = 0.001;
					}else if((map.getZoom() > 15.5) && (map.getZoom() <= 16)){
						tolerance = 0.002;
					}else{
						return;
					}
					if(features.length){
						// 面内点
						let points = [];
						features.forEach((e) => {
							points.push(turf.point([e.properties.coordinatesX, e.properties.coordinatesY], e.properties));
						});
						// tolerance不为0时进行点抽稀
						if(tolerance){
							let simplifyPoints = simplifyMutiPoints.getProcessPoints(points, tolerance, "");
							simplifyPoints.forEach((e) => {
								let description = `<div class="popup no-selection" style="display:block;"><p>${e.properties['fwbh']}</p><p>${e.properties['hzxm']}</p><p>${e.properties['address']}</p></div>`;
								let popup = new mapboxgl.Popup({
									anchor: 'bottom',
									closeButton: false,
									closeOnClick: false,
									focusAfterOpen: true,
									maxWidth: 'none',
									offset: [0, -10], // 左，上为负
								}).setLngLat([e.properties.coordinatesX, e.properties.coordinatesY]).setHTML(description);
								popup.addTo(map);
								popupMoveArray.push(popup);
							});
						}else{
							points.forEach((e) => {
								let description = `<div class="popup no-selection" style="display:block;"><p>${e.properties['fwbh']}</p><p>${e.properties['hzxm']}</p><p>${e.properties['address']}</p></div>`;
								let popup = new mapboxgl.Popup({
									anchor: 'bottom',
									closeButton: false,
									closeOnClick: false,
									focusAfterOpen: true,
									maxWidth: 'none',
									offset: [0, -10], // 左，上为负
								}).setLngLat([e.properties.coordinatesX, e.properties.coordinatesY]).setHTML(description);
								popup.addTo(map);
								popupMoveArray.push(popup);
							});
						}
						showPopups(popupMoveArray);
					}
				});
				// initInfo消息交互
				let message = { 'key': 'initInfo', 'value': { 'initType': true } };
				// sendMessage('gisMapMessage', message);
				setTimeout(e => sendMessage('gisMapMessage', message),1000)
			});
		}
		
		function panTo(lonlat){
			map.flyTo({
				center: lonlat,
				// 速度越大越快
				speed: 1,
				// zoom: 19
			});

			// initInfo消息交互
			let message = { 'key': 'localInfo', 'value': { 'localInfo': true } };
			sendMessage('gisLayerMessage', message);
		}
		/**
		 * <summary>抽稀处理，对密集的点抽稀，保持点的均匀分布。</summary>
		 * <param name="points" type="Array">待抽稀的数组  features Array</param>
		 * <param name="tolerance" type="Float">取样临界值</param>
		 * <param name="indicator" type="string">关键属性</param>
		 */
		let simplifyMutiPoints = {
		    // dis: 1000,
		    // degToMeter: Math.PI * 6378137 / 180.0, //6378137赤道半径，一度对应赤道上的一米
		    // buf: parseInt(this.dis * 1.0e7 / degToMeter), //1公里对应多少度
		    getProcessPoints: function(points, tolerance, indicator) {
		        if (points.length < 3) return points; //小于3个点时不抽稀，因为1个或2个点无法进行抽稀
		        let IndexsToReduce = this.reduce(points, tolerance, indicator); //抽稀 //保存需要点下标的数组
		        let resultPoints = []; //返回的点数组
		        for (let i = 0; i < points.length; i++) {
		            if (IndexsToReduce.indexOf(i) < 0) {
		                resultPoints.push(points[i]);
		            }
		        }
		        return resultPoints;
		    },
		    reduce: function(points, tolerance, indicator) { //遍历抽稀，删除相同权重的点
		        // let IndexsToKeep = [];
		        let IndexsToReduce = [];
		        for (let i = 0; i < points.length; i++) {
		            let k = i + 1;
		            if (IndexsToReduce.indexOf(i) >= 0) { //如果是已删除的点，跳出
		                continue;
		            }
		            let p1 = points[i];
		            while (k < points.length) {
		                let p2 = points[k];
		                let ToReduce = this.CheckPointEqualInBuffer(p1, p2, tolerance, indicator);
		                if (ToReduce) {
		                    IndexsToReduce.push(k);
		                }
		                k++;
		            }
		        }
		        return IndexsToReduce;
		    },
		    //判断在抽稀中是否等值（依据缓冲范围以及关键属性）
		    CheckPointEqualInBuffer: function(point1, point2, buffer /*缓冲相等*/ , indicator /*属性相等*/ ) {
				let x1=point1.geometry.coordinates[0],
				y1=point1.geometry.coordinates[1],
				x2=point2.geometry.coordinates[0],
				y2=point2.geometry.coordinates[1];
		        let inbuffer = (Math.abs(x1 - x2) <= buffer && Math.abs(y1 - y2) <= buffer);
		        let iszEqual = true;
		        if (indicator) {
		            iszEqual = point1.properties[indicator] == point2.properties[indicator];
		        }
		        return inbuffer && iszEqual;
		    }
		};
		
		/**
		 * 碰撞检测
		 * @param {Object} popups
		 */
		function showPopups(popups){
			let temp_arr = [popups[0]];
			popups[0].getElement().getElementsByClassName("popup")[0].setAttribute("style", "display: block;");
			for(let i=1; i<popups.length; ++i){
				let res_isOverlap = false;
				for(let j=0; j<temp_arr.length; ++j){
					// 判断重叠
					res_isOverlap = isOverlap(popups[i].getElement().getBoundingClientRect(), temp_arr[j].getElement().getBoundingClientRect());
					if(res_isOverlap){
						popups[i].getElement().getElementsByClassName("popup")[0].setAttribute("style", "display: none;");
						break;
					}
				}
				if(!res_isOverlap) temp_arr.push(popups[i]);
			}
		}
		
		/**
		 * 无重叠返回false,有重叠返回ture(并隐藏当前div)
		 * @param {Object} boundOne
		 * @param {Object} boundTwo
		 */
		function isOverlap(boundOne, boundTwo){
			// 左下右上
			let left = boundTwo.left + boundTwo.width < boundOne.left,
				bottom = boundTwo.top > boundOne.top + boundOne.height + 10,
				right = boundTwo.left > boundOne.left + boundOne.width,
				top = boundTwo.top + boundTwo.height+10 < boundOne.top;
			return !(left || bottom || right || top);
		}
		
		/**
		 * 清空气泡
		 */
		function clearPopups(){
			if(!popupMoveArray.length) return;
			popupMoveArray.forEach((e) => {
				e.remove();
			});
			popupMoveArray = [];
		}
		
		/**
		 * 加载天地图底图
		 */
		function addTDT_img(){
			clearTDT();
			
			// source加载一次即可
			if(!map.getSource('tdt_img')){
				// tdt_img
				map.addSource('tdt_img', {
					tileSize: 256,
					tiles: [
						'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t4.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t5.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
					],
					type: 'raster',
					maxzoom: 17
				});
			}
			map.addLayer({
				id: 'tdt_img',
				source: 'tdt_img',
				type: 'raster',
				minzoom: 0,
			});
			if(!map.getSource('tdt_cia')){
				// tdt_label
				map.addSource('tdt_cia', {
					tileSize: 256,
					tiles: [
						'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t1.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t3.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t4.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t5.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t6.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t7.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
					],
					type: 'raster',
					maxzoom: 17
				});
			}
			map.addLayer({
				id: 'tdt_cia',
				source: 'tdt_cia',
				type: 'raster',
				minzoom: 0,
			});
			// 将矢量图层移动到天地图上方
			if(map.getLayer('vector_polygon')) map.moveLayer('vector_polygon', 'tdt_cia');
		}
		
		function addTDT_vec(){
			clearTDT();
			
			// source加载一次即可
			if(!map.getSource('tdt_vec')){
				// tdt_vec
				map.addSource('tdt_vec', {
					tileSize: 256,
					tiles: [
						'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t2.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t5.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t6.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t7.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
					],
					type: 'raster',
					maxzoom: 17
				});
			}
			map.addLayer({
				id: 'tdt_vec',
				source: 'tdt_vec',
				type: 'raster',
				minzoom: 0,
			});
			if(!map.getSource('tdt_cva')){
				// tdt_label
				map.addSource('tdt_cva', {
					tileSize: 256,
					tiles: [
						'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t2.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t3.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t4.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t5.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t6.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
						'https://t7.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=1131f87360fe63e2010d316515cb6c2f',
					],
					type: 'raster',
					maxzoom: 17
				});
			}
			map.addLayer({
				id: 'tdt_cva',
				source: 'tdt_cva',
				type: 'raster',
				minzoom: 0,
			});
			// 将矢量图层移动到天地图上方
			if(map.getLayer('vector_polygon')) map.moveLayer('vector_polygon', 'tdt_cva');
		}
		
		function clearTDT(){
			if (map.getLayer('tdt_img')) map.removeLayer('tdt_img');
			if (map.getLayer('tdt_cia')) map.removeLayer('tdt_cia');
			if (map.getLayer('tdt_vec')) map.removeLayer('tdt_vec');
			if (map.getLayer('tdt_cva')) map.removeLayer('tdt_cva');
		}
		
		/**
		 * 加载矢量图层
		 */
		function addVectorLayers(){
			// 添加数据源
			map.addSource('vector_polygon', {
				type: 'geojson',
				data: FeatureCollection
			});
			map.addLayer({
				id: 'vector_polygon',
				type: 'fill',
				source: 'vector_polygon',
				layout: {},
				paint: {
					'fill-color': 'rgba(0, 255, 255, 0)', //面颜色
					// 'fill-opacity': 1, // 面透明度
					// 'fill-outline-color': 'rgba(0, 255, 255, 1)'
				}
			});

			map.addSource('vector_line', {
				type: 'geojson',
				data: FeatureCollection
			})
			map.addLayer({
				id: 'vector_line',
				type: 'line',
				source: 'vector_line',
				layout: {},
				paint: {
					'line-color': 'rgba(59, 133, 255, 1)',
					'line-width': 7
				}
			});
		}
		
		/**
		 * 添加多边形矢量数据
		 */
		function addPolygons(){
			// map.getSource('vector_polygon').setData(zm_building);
			map.getSource('vector_polygon').setData(wfsGeojson);
			map.getSource('vector_line').setData(wfsGeojson);
		}
		/**
		 * 加载wms图层
		 */
		function addWMSLayers(){
			let url = 'http://39.103.152.237:8084/geoserver/topp/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&STYLES&LAYERS=topp:zm_building3857&SRS=EPSG:3857&WIDTH=256&HEIGHT=256&BBOX={bbox-epsg-3857}'
			//添加数据源
			map.addSource('wms_layer', {
				type: 'raster',
				tiles: [url],
				tileSize: 256
			});

			map.addLayer({
				id: 'wms_layer',
				source: 'wms_layer',
				type: 'raster',
				minzoom: 0
			});
		}
		/**
		 * 定位矢量数据
		 */
	 function panToByGeo(geo) {
			if(!geo) return console.log('无geometry数据！')

			//缩放至featrues
			let featuresCenter = turf.getCoord(turf.center(geo));
			map.easeTo(
				{
					center: featuresCenter,
					// 速度越大越快
					screenSpeed: 1.5,
					zoom: 19,
					easing(t) { return t * t * t;}
				},{
					zoomend: "ZOOMEND",
					zoom: "ZOOM"
				}
			);
			map.on('zoomend', async e =>{
				if (e.zoomend == "ZOOMEND") {
					// 读取wfs数据
					await getGeojsonByWFS();
					// 加载地块
					addPolygons();
				}
			})
			
			// 修改图层样式
			map.setPaintProperty(
				'vector_line', 
				'line-color', 
				[
					"case",
					["==", ["get", 'fwbh'], geo.properties['fwbh']],
					'rgba(255, 91, 99, 1)',
					'rgba(59, 133, 255, 1)',
				]
			);
			// serchInfo消息交互
			let message = { 'key': 'searchInfo', 'value': { 'searchType': true } };
			sendMessage('gisLayerMessage', message);
		}
		/**
		 * 请求wfs服务
		 */
		 let new_arr = [];
		 let feature_arr = [];

		 async function getGeojsonByWFS() {
			let bbox = map.getBounds();

			await fetch(`${wfsUrl}&bbox=${bbox.getWest()},${bbox.getSouth()},${bbox.getEast()},${bbox.getNorth()}`)
			.then(response => response.json())
			.then(data => {
				if(!data.features.length) throw "此区域无数据";
				fwbh_arr = data.features;
			})

			for(i = 0; i < fwbh_arr.length; i++){
				if(!new_arr.includes(fwbh_arr[i]['properties']['fwbh'])){
					new_arr.push(fwbh_arr[i]['properties']['fwbh']);
					feature_arr.push(fwbh_arr[i]);
				}
			}

			wfsGeojson = {type: "FeatureCollection", features: feature_arr}

			wfsGeojson.features.forEach((e) => {
				if(!e.geometry.coordinates.length) return;

				let point = turf.pointOnFeature(e);
				e.properties.coordinatesX = point.geometry.coordinates[0];
				e.properties.coordinatesY = point.geometry.coordinates[1];
			});
		}
		
		try {
			getGeojsonByWFS();
		} catch (error) {
		}
	</script>
</body>
</html>